<!-- 首页 -->
<template>
	<view>
	 
	
  <view  class="home-wrap u-m-b-20">
    <!-- 空白页 -->
    <!-- #ifdef APP-PLUS -->
    <u-no-network @retry="init"></u-no-network>
    <!-- #endif -->

    <!-- <shopro-empty
      v-if="!hasTemplate"
      :image="$IMG_URL + '/imgs/empty/template_empty.png'"
      tipText="暂未找到模板，请前往装修~"
    ></shopro-empty> -->
    <!-- v-else-if -->

    <view v-if="isConnected && isRefresh" class="content-box">
      <!-- 导航栏 -->
      <home-head></home-head>
      <indexBananer></indexBananer>
      <indexNav></indexNav>
      <indexThings :page="page" @finish="setFinish"></indexThings>
      <!-- <home-head
         v-if="headSwiperList && headSwiperList.length"
        :scrollTop="scrollTop"
        borderRadius="0"
        :navTitle="initShop.name"
        :list="headSwiperList" 
      ></home-head> -->
      <!-- 自定义模块 -->
      <!-- <view class="template-box">
        <block v-for="(item, index) in homeTemplate" :key="item.id"> -->
      <!-- 轮播 -->
      <!-- <sh-banner
            v-if="item.type === 'banner' && index !== 0"
            :Px="item.content.x"
            :Py="item.content.y"
            :borderRadius="item.content.radius"
            :height="item.content.height"
            :list="item.content.list"
          ></sh-banner> -->
      <!-- 搜索 -->
      <!-- <sh-search v-if="item.type === 'search'"></sh-search> -->
      <!-- 滑动宫格 -->
      <!-- <sh-grid-swiper
            v-if="item.type === 'menu'"
            :list="item.content.list"
            :oneRowNum="item.content.style"
          ></sh-grid-swiper> -->
      <!-- </block> -->
      <!-- 金刚区 -->
      <!-- <kongo-district :list="KONGO_LIST" :one-row-num="5"></kongo-district>
      </view> -->
      <!-- <tw-columns-two></tw-columns-two> -->
      <!-- 分类选项卡 -->
      <!-- <sh-category-tabs
        v-if="
          categoryTabsData &&
          categoryTabsData.category_arr &&
          categoryTabsData.category_arr.length
        "
        :enable="enable"
        :styleType="categoryTabsData.style"
        :tabsList="categoryTabsData.category_arr"
      ></sh-category-tabs> -->
      <!-- 登录提示 -->
      <shopro-auth-modal></shopro-auth-modal>
      <!-- 悬浮按钮 -->
      <!-- <shopro-float-btn></shopro-float-btn> -->
      <!-- 连续弹窗提醒 -->
      <shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>
      <!-- 隐私协议 -->
      <!-- #ifdef APP-PLUS -->
      <privacy-modal
        v-if="initShop && initShop.name"
        v-model="showPrivacy"
      ></privacy-modal>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="tabbar-hack" style="height: 120rpx; width: 100%"></view>
      <!-- #endif -->
    </view>
    <!-- <shopro-tabbar></shopro-tabbar> -->
    <toast-lottery></toast-lottery>
  </view>	</view>
</template>

<script>
// 1.顶部栏，展示公司LOGO图标以及搜索框，签到图标（UI先进行设计，第一个版本前端不展示），用户点击搜索框区域后进入搜索栏分页
//2.分页选择区域，根据商品类型区分分页按钮，用户点击不同的分页按钮进入不同的分页区域，区分按钮的选中和非选中状态（第一个版本只展示“推荐”按钮）顶部栏和分页选择区域冻结在页面的顶部常显，底部栏冻结在页面的底部常显，中间部分可滑动更改显示内容
//3.公告栏区域，展示25个以内的文本信息，文本信息在后台系统中进行配置，间隔10S后自动展示下一条信息，用户可点击关闭按钮关闭公告栏，底部区域自动进行适配
//4.banner展示区域，第一个版本不进行自动的banner展示，需要用户手动切换，banner图最大上限为9
//5.金刚区图标，展示主要的功能图标按钮加文字信息说明，点击对应的图标可跳转至相应模块界面（第一个版本只支持福袋和一番赏两个功能跳转，其余图标展示商品图片点击后直接跳转至配置的对应商品的活动）
//6.活动链接展示对应的活动封面图，活动标签（第一个版本只有一番赏和福袋两个标签），保底必中金额显示为该活动内的商品的最低参考价——最高参考价。单发金额以及月销和划线价格在活动管理中进行配置
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shTitleCard from './components/sh-title-card.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';

import privacyModal from './index/privacy-modal.vue';
import homeHead from './two_open_components/home-head.vue';
import twColumnsTwo from './two_open_components/tw-columns-two.vue';
import kongoDistrict from './two_open_components/kongo-district.vue';
import { KONGO_LIST } from './two_open_components/kongoList.js';
import indexBananer from './two_open_components/index-bananer.vue';
import indexNav from './two_open_components/index-nav.vue';
import indexThings from './two_open_components/index-things.vue';
import ToastLottery from './components/toast-lottery.vue';



// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  components: {
    shBanner,
    shGridSwiper,
    shGroupon,
    shHotGoods,
    shAdv,
    shCoupon,
    shSeckill,
    shRichtext,
    shTitleCard,
    shSearch,
    shCategoryTabs,

    privacyModal,
    homeHead,

    kongoDistrict,
    twColumnsTwo,
    indexBananer,
    indexNav,
    indexThings,
    ToastLottery,

    // #ifdef MP-WEIXIN
    shLive,
    // #endif
  },
  data() {
    return {
      KONGO_LIST: KONGO_LIST,

      // #ifdef MP-WEIXIN
      HAS_LIVE: HAS_LIVE,
      // #endif
      isRefresh: true,

      enable: false, //是否开启吸顶。
      isConnected: true, //是否有网
      showPrivacy: false, //协议
      scrollTop: 0,
      page: 1,
      //下拉完成到底
      finished: false,
    };
  },
  computed: {
     ...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
    // 头部模块数据
    headSwiperList() {
      if (this.homeTemplate?.length) {
        return this.homeTemplate[0]?.content?.list;
      }
    },
    // 分类选项卡数据
    categoryTabsData() {
      if (this.homeTemplate?.length) {
        return this.homeTemplate[this.homeTemplate.length - 1]?.content;
      }
    },
  },
  onPullDownRefresh() {
    this.init();
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onShow() {
    let that = this;
    this.enable = true;
    this.isLogin && this.getCartList();
    // 网络变化检测
    uni.onNetworkStatusChange((res) => {
      this.isConnected = res.isConnected;
      res.isConnected && this.init();
    });
  },
  onHide() {
    this.enable = false;
  },
  onLoad() {
    // #ifdef APP-VUE
    // plus.runtime.disagreePrivacy();
    // console.log(plus.runtime.isAgreePrivacy(), 1111111111);
    // app隐私协议弹窗
    if (!plus.runtime.isAgreePrivacy()) {
      this.showPrivacy = true;
      this.showNoticeModal = false;
    }
    // #endif
  },
  methods: {
    ...mapActions(['appInit', 'getTemplate', 'getCartList']),
    // 初始化
    init() {
      this.isRefresh = false;
      this.page = 1;
      return Promise.all([this.getTemplate()]).then(() => {
        uni.stopPullDownRefresh();
        this.isRefresh = true;
      });
    },
    //下拉加载商品到底了
    setFinish() {
      this.finished = true;
    },
  },
  onReachBottom() {
    if (this.finished) return;
    this.page = this.page + 1;
  },
};
</script>

<style lang="scss"></style>
